<script>
import { computed, reactive } from "vue";
import { public_status } from "../store/public_status";
import { useStore } from "../store/index";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  setup() {
    // # 数据中心
    let data = reactive({
      del_btn_isShow: false, // # 控制删除按钮显示隐藏

      toggle_index: null, // # 选中商品的下标

      startX: null, // # 起始位置
      endX: null, // # 结束位置

      popup1_isShow: false, // # 弹出层 确认清空购物车
    });

    // # 配置路由
    let router = useRouter();

    // # 判断手指滑动位置差从而使删除按钮显示隐藏
    let is_show = (i, $e) => {
      data.toggle_index = i;
      if ($e.touches.length != 0) {
        data.startX = $e.touches[0].clientX;
      } else {
        data.endX = $e.changedTouches[0].clientX;

        // ! 计算手指滑动的位置差
        let isShow = data.startX - data.endX;

        if (isShow > 10) {
          data.del_btn_isShow = true;
        } else if (isShow < -10) {
          data.del_btn_isShow = false;
        }

        // 清空
        data.startY = null;
        data.endY = null;
      }
    };

    // # 用户数据
    let userId = localStorage.getItem("P4_userId");
    let Shopping_Cart = useStore().userData[userId].Shopping_Cart;

    //  # 删除功能
    let del = (i) => {
      Shopping_Cart.splice(i, 1);
      data.toggle_index = null;
      data.del_btn_isShow = false;
    };

    // # 添加按钮
    let add = (i) => {
      Shopping_Cart[i].num += 1;
    };

    // # 减少按钮
    let reduce = (i) => {
      Shopping_Cart[i].num <= 1
        ? (Shopping_Cart[i].num = 1)
        : (Shopping_Cart[i].num -= 1);
    };

    // # 公共状态
    let publicStatus = public_status();
    publicStatus.display = true; // # 底部导航栏显示隐藏
    publicStatus._isShow = true; // # 底部导航栏 购物车高度

    // # 选中功能
    let toggle = (i) => {
      Shopping_Cart[i].checked = !Shopping_Cart[i].checked;
    };

    // # 清空功能的弹出层
    let isClear = () => {
      data.popup1_isShow = true;
    };

    // # 清空购物车功能
    let clear = () => {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        onClose: () => {
          Shopping_Cart.splice(0, Shopping_Cart.length); // # 清空
          data.popup1_isShow = false;
        },
      });
    };

    // # 去支付功能
    let goPay = () => {
      let hasChecked = Shopping_Cart.some((item) => item.checked == true);
      if (hasChecked) {
        // * 轻提示
        Toast.loading({
          message: "处理中...",
          forbidClick: true,
          loadingType: "spinner",
          onClose: () => {
            router.push("/pay");
          },
        });
      } else {
        Toast({
          message: "请选择购买的商品",
          position: "bottom",
        });
      }
    };

    // # 计算总价格 computed
    let allPrice = computed(() => {
      let sum = 0;
      Shopping_Cart.forEach((item) => {
        if (item.checked) {
          sum += item.num * item.price;
        }
      });
      return sum;
    });

    // $ 返回数据
    return {
      // ^ 数据
      data, // # 数据
      Shopping_Cart, // # 当前用户的购物车数据
      publicStatus, // # 公共状态
      allPrice, // # 总价格

      // ^ 方法
      is_show, // # 控制删除按钮显示隐藏
      del, // # 删除功能
      add, // # 添加功能
      reduce, // # 减少功能
      toggle, // # 选中功能
      isClear, // # 清空功能的弹出层
      clear, // # 清空购物车功能
      goPay, // # 去支付功能
    };
  },
};
</script>

<template>
  <div class="shopCarView">
    <!-- 头部 -->
    <header class="header">
      <div class="title">
        <span>Shopping Cart</span>
        <i class="iconfont icon-shengdanjianhuagouwuche"></i>
      </div>
      <div class="clear" @click="isClear" v-show="Shopping_Cart.length">
        清空
      </div>
    </header>
    <!-- 头部 -->

    <!-- 购物车列表 -->
    <div class="order">
      <div class="title">您的购物车</div>
      <div class="content">
        <div
          :class="[
            'item',
            { del: data.del_btn_isShow && data.toggle_index == i },
            { checked: item.checked },
          ]"
          v-for="(item, i) in Shopping_Cart"
          @touchstart="is_show(i, $event)"
          @touchend="is_show(i, $event)"
          :key="i"
        >
          <router-link :to="'/details?id=' + item.id" class="img">
            <img :src="item.imgUrl" alt="" />
          </router-link>

          <div class="text" @click="toggle(i)">
            <div class="name one-txt-cut">{{ item.title }}</div>
            <div class="price">
              ￥{{ item.price }} {{ item.type }} {{ item.size }}
            </div>
          </div>

          <div class="btn">
            <div class="reduce" @click="reduce(i)">
              <i class="iconfont icon-jianhao"></i>
            </div>
            <div class="num">{{ item.num }}</div>
            <div class="add" @click="add(i)">
              <i class="iconfont icon-jiahao"></i>
            </div>
          </div>

          <div class="del" @click="del(i)">删除</div>
        </div>
      </div>
    </div>
    <!-- 购物车列表 -->

    <!-- 底部支付 -->
    <div
      :class="[
        'goPay',
        { show: Shopping_Cart.length > 0 },
        { down: !publicStatus._isShow && Shopping_Cart.length > 0 },
      ]"
    >
      <div class="allPrice one-txt-cut">
        ￥<span>{{ allPrice }}</span>
      </div>
      <div class="btn" @click="goPay">去支付</div>
    </div>
    <!-- 底部支付 -->

    <!-- 弹出层：确认清空购物车 -->
    <van-popup
      class="popup1"
      v-model:show="data.popup1_isShow"
      :overlay-style="{ background: 'rgba(0,0,0,0.3)' }"
      :style="{ background: 'unset' }"
    >
      <div class="box">
        <div class="question">是否清空购物车？</div>
        <div class="answer">
          <div class="no" @click="data.popup1_isShow = false">否</div>
          <div class="yes" @click="clear">是</div>
        </div>
      </div>
    </van-popup>
    <!-- 弹出层：确认清空购物车 -->

    <!-- 空状态 -->
    <div class="Empty_state" v-show="Shopping_Cart.length <= 0">
      <img src="../assets/imgs/暂无内容.svg" alt="" />
      <router-link to="/home" class="btn">去逛逛</router-link>
    </div>
    <!-- 空状态 -->
  </div>
</template>


<style lang="scss" scoped>
.shopCarView {
  padding-bottom: 100px;

  // todo 头部
  > header.header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: #fff;
    height: 42px;
    line-height: 42px;

    padding: 10px 12px 0;

    position: sticky;
    top: 0;
    z-index: 100;

    > .title {
      display: flex;
      align-items: center;

      > span {
        font-size: 22px;
        font-weight: bold;
      }

      > i {
        line-height: 42px;
        margin-left: 5px;
        color: #333;
      }
    }

    > .clear {
      font-size: 12px;
      line-height: 28px;
      padding: 0 10px;
      background: #f9f9f9;
      border-radius: 10px;
      margin-right: 5px;
    }
  }

  // todo 购物车列表
  > .order {
    padding: 0 12px;

    > .title {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      font-weight: bold;
      position: sticky;
      top: 50px;
      background: #fff;
      z-index: 100;
    }

    > .content {
      width: 100%;
      overflow: hidden;

      > .item {
        height: 76px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        position: relative;
        z-index: 10;
        transition: all 0.3s;

        background: #f9f9f9;
        border-radius: 16px;

        margin-bottom: 15px;

        overflow: hidden;

        &.checked {
          background: #333;
          color: #fff;

          .btn > .num {
            color: #333;
          }
        }

        &.del {
          > .del {
            width: 76px;
            font-size: 14px;
          }

          > .btn {
            width: 0;
          }
        }

        > .img {
          width: 76px;
          flex-shrink: 0;
          border-radius: 16px;
          overflow: hidden;
          margin-right: 10px;

          > img {
            width: 100%;
          }
        }

        > .text {
          padding: 18px 0;
          max-width: 40%;
          flex: 1;

          > .name {
            font-size: 16px;
            height: 20px;

            font-weight: bold;
            margin-bottom: 5px;
          }

          > .price {
            color: #ccc;
          }
        }

        > .btn {
          display: flex;
          align-items: center;
          margin-right: 20px;
          overflow: hidden;
          transition: all 0.3s;

          i {
            font-weight: bold;
          }

          > .num {
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            border-radius: 100%;
            margin: 0 10px;

            font-weight: 700;

            background: #f0f0f0;
          }
        }

        > .del {
          width: 0px;
          height: 100%;

          transition: all 0.2s;

          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;

          background: #f34d5c;

          flex-shrink: 0;

          font-size: 10px;
          line-height: 76px;
          color: #fff;
          text-align: center;
          font-weight: bold;
        }
      }
    }
  }

  // todo 支付跳转按钮
  > .goPay {
    width: 200px;
    height: 50px;

    position: fixed;
    bottom: 120px;
    right: -100%;
    z-index: 100;

    background: #fff;
    box-shadow: -1px 5px 5px 2px rgba($color: #f0f0f0, $alpha: 0.5);
    border-radius: 10px;

    transition: all .5s;

    display: flex;
    align-items: center;
    justify-content: space-between;

    &.show {
      right: 15px;
    }

    &.down {
      bottom: 30px;
      width: 92%;
      box-sizing: border-box;
      // padding: 0 15px;
      right: 0px;
      left: 0px;
      margin: 0 auto;
    }

    > .allPrice {
      margin-left: 10px;
      width: 50%;

      > span {
        font-size: 14px;
        font-weight: 600;
      }
    }

    > .btn {
      width: 70px;
      height: 40px;

      line-height: 40px;
      text-align: center;
      color: #fff;
      font-weight: 700;

      background: #333;
      border-radius: 10px;
      margin-right: 10px;
    }
  }

  // todo 确认清空购物车 弹出层
  > .van-popup.popup1 {
    > .box {
      width: 260px;
      height: 150px;
      background: #f9f9f9;
      border-radius: 15px;

      > .question {
        font-size: 18px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        height: 70%;

        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 1px;
          background: #ccc;
          bottom: 0;
          left: 0;
          transform: scaleY(0.5);
        }
      }

      > .answer {
        display: flex;
        height: 30%;

        > div {
          flex: 1;
          height: 100%;

          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 13px;
          font-weight: bold;
        }

        > .no {
          border-right: 1px solid #e0e0e0;
        }
      }
    }
  }

  // todo 空状态
  .Empty_state {
    max-width: 400px;
    margin: 0 auto;

    position: relative;

    > .btn {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 50px;
      margin: 0 auto;

      background: #333;
      border-radius: 10px;
      color: #fff;

      width: 80px;
      height: 30px;

      line-height: 30px;
      text-align: center;

      z-index: 10;

      &:active {
        text-decoration: underline;
        transform: translateY(-1px);
      }
    }
  }
}
</style>